<template>
  <div>
    <el-select v-model="selected" placeholder="请选择服务" @change="selectChange">
      <el-option
          v-for="item in options"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <iframe :src="url" style="width: 100%;height: 800px;"></iframe>
  </div>
</template>

<script>
export default {
  name: "DruidIndexView",
  data() {
    return {
      options: [{
        value: '9091',
        label: '用户服务'
      }, {
        value: '9092',
        label: '角色服务'
      }, {
        value: '9093',
        label: '菜单服务'
      }, {
        value: '9094',
        label: '部门服务'
      }, {
        value: '9095',
        label: '岗位服务'
      }, {
        value: '9096',
        label: '字典服务'
      },{
        value: '9097',
        label: '参数服务'
      },{
        value: '9098',
        label: '公告服务'
      },{
        value: '9099',
        label: '日志服务'
      },{
        value: '9191',
        label: '定时任务服务'
      }],
      selected:'9091',
      url:''
    }
  },methods:{
    selectChange(){
      this.url='http://localhost:'+this.selected+'/druid'
    }
  },created() {
    this.selectChange()
  }
}
</script>

<style scoped>

</style>